<!DOCTYPE html>
<html>
	<head>
		<title>CSS3开关灯效果</title>
		<meta charset="utf-8" />
		<style>
			* {
				margin: 0;
				padding: 0;
				font-size: 12px;
				list-style: none;
				border: 0;
				-webkit-transition: opacity .2s ease-out;
			}

			body {
				margin: 30px;
			}

			ul {
				background: url(http://www.codesc.net/jscode/demoimg/201207/T1HH1oXexDXXXXXXXX-190-300.png) no-repeat left top;
				width: 190px;
				height: 300px;
				float: left;
			}

			ul li {
				float: left;
				position: relative;
				width: 95px;
				height: 30px;
			}

			ul li a {
				position: absolute;
				text-indent: -9999px;
				display: block;
				width: 95px;
				height: 30px;
				top: 0;
				left: 0;
				overflow: hidden;
				outline: none;
			}

			.floorMain {
				float: left;
				background-color: #000;
				width: 390px;
			}

			.floorMain:hover a {
				opacity: 0.7;
				filter: alpha(opacity='70');
			}

			.floorMain a {
				float: left;
				line-height: 0;
			}

			.floorMain a:hover {
				opacity: 1;
				filter: none;
			}
		</style>
	</head>
	<body>
		<div style="width:970px;">
			<ul>
				<li><a href="#">图片高亮</a></li>
				<li><a href="#">图片变暗</a></li>
				<li><a href="#">悬停特效</a></li>
				<li><a href="#">响应式效果</a></li>
			</ul>
			<div class="floorMain">
				<a href="#"><img src="http://www.codesc.net/jscode/demoimg/201207/T11YWoXdhSXXXXXXXX-195-300.jpg" /></a>
				<a href="#"><img src="http://www.codesc.net/jscode/demoimg/201207/T17KanXa8cXXXXXXXX-195-150.jpg" /></a>
				<a href="#"><img src="http://www.codesc.net/jscode/demoimg/201207/T1sVCoXaNxXXXXXXXX-195-150.jpg" /></a>
			</div>
		</div>
	</body>
</html>
